<template>
  <el-select v-model="levelId" placeholder="请选择代理等级" :class="classStyle" clearable>
    <el-option
      v-for="level in levelOptions"
      :key="level.agentLevelId"
      :label="level.agentLevelName"
      :value="level.agentLevelId"
    >
      <span class="flex items-center gap-x-8px">
        {{ level.agentLevelName }}
      </span>
    </el-option>
  </el-select>
</template>
<script lang="ts" setup>
import * as LevelApi from '@/api/mall/trade/agent/level'

/** 会员等级选择框 **/
defineOptions({ name: 'LevelSelect' })

const props = defineProps({
  /** 下拉框选中值 **/
  modelValue: {
    type: Number,
    default: undefined
  },
  classStyle: {
    type: String,
    default: 'w-240px!'
  }
})
const emit = defineEmits(['update:modelValue'])

const levelId = computed({
  get() {
    return props.modelValue
  },

  set(value: any) {
    emit('update:modelValue', value)
  }
})

const levelOptions = ref<LevelApi.LevelVO[]>([])

const getList = async () => {
  const data = await LevelApi.getLevelList({})
  levelOptions.value = data.list
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
